<template>
    <div class="setApproval">
        <div class="setApproval_content">
            <div class="tips">
                <i class="el-icon-warning"></i>
                <div class="tips_text">
                    <span>1.  如果下面表格中 【模板code 】为空，将不能发起审批，请先点击【创建审批模版】。</span>
                    <span style="color:rgb(255,70,67)">2. 如果下面表格中 【模板code】 有值，请不要点击【创建审批模版】，若点击【创建审批模版】将会重新构建，而之前设置的审批流程将会被初始化，则需重新设置审批流程。</span>
                    <span>3. 要设置审批流程，请到钉钉管理后台--> 审批--> 找到【企业资产领用】和【企业耗材领用】点击编辑进行审批流程设置。</span>
                </div>
            </div>
            <div class="btnList">
                <el-button  type="info" @click="listenClick(1)">创建审批模板</el-button>
                <el-button type="danger" @click="listenClick(0)">如何设置审批</el-button>
            </div>
            <lpj-table-vue :baseNum='0' :tableHeaderData="tableHeaderData" :tableData="tableData"></lpj-table-vue>
            <!-- <pagination align="right" :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn">
            </pagination> -->
        </div>
        <dialog-vue :dialogTitle="dialogTitle" :dialogVisible="dialogVisible" @dialogVisibleChangeFn="dialogVisibleChangeFn">
            <boxConfirm-vue :conformList="{}" @confirmYes="confirmYes" @confirmNo="confirmNo"/> 
        </dialog-vue>
    </div>
</template>

<script>
 /* eslint-disable */ 
import {ApprovalTempList, createApprovalTemp} from "../api"
// import HeaderVue from "@/components/HeaderVue"
import LpjTableVue from "@/components/LpjTableVue"
import Pagination from "@/components/Pagination"
import DialogVue from "@/components/DialogVue"
export default {
    name: 'setApproval',
    components:{
        // HeaderVue,
        LpjTableVue,
        Pagination,
        DialogVue
    },
    data(){
        return{
            tableHeaderData:[
                {label:"模版实例ID",prop:"sortNum",},
                {label:"模版名称",prop:"temp_name"},
                {label:"模板code",prop:"temp_code"},
                {label:"创建时间",prop:"create_time"}
            ],
            /*table里的数据 */
            tableData:[],
            /*分页 数据*/
            paginationMes:{},
            /*默认分页数据 */
            defaultPaginationMes:{ start:1,count:10 },
            dialogTitle: '',/*领用弹框头部*/
            dialogVisible: false,/*是否显示领用弹框*/
        }
    },
    created(){
        this.getDataFn() 
    },
    methods: {
        /*创建模板*/
        listenClick(val){
            if(val==1){
                if(this.tableData.length){
                    return this.$confirm(`已经有审批模版，请不要重复创建审批模版，若点击创建审批模版将会重新构建审批流程，而之前设置的审批流程将会被初始化，则您需重新去钉钉进行审批设置，请您谨慎操作！用户选择“确认创建”则重新创建模板，选择“取消创建”，则不用重新创建模板；'`, '提示', {
                    confirmButtonText: '确定创建',
                    cancelButtonText: '取消创建',
                    type:"warning",
                    center:true
                        }).then(() => {
                            this.confirmYes();
                        }).catch(err=>{}
                    );
                }
                createApprovalTemp().then(res=>{
                    this.getDataFn()
                })
                return 
            }
            this.$router.push({ path: '/setApprovalProcess', query: {param: '设置审批'} })
        },
        /*确定创建*/
        confirmYes(){
            createApprovalTemp().then(res=>{
                this.dialogVisible = false
                this.getDataFn()
            })
        },
        /*取消创建*/
        confirmNo(){
            this.dialogVisible = false
        },
        /*获取table数据请求 */
        getDataFn(data){
            ApprovalTempList(data).then((res)=>{
                if(res){
                    // this.paginationMes={size: 10,total: 5}
                    this.tableData=res
                }
            })
        },
        /*分页传过来的 当前第几页 */
        currentChangeFn(val){
            this.defaultPaginationMes.start=val
            this.getDataFn()
        },
        /*分页传过来的 table每页的条数 */
        sizeChangeFn(val){
            this.defaultPaginationMes.count=val
            this.getDataFn()
        },
        /*监听子组件弹窗的Visible值的变化*/
        dialogVisibleChangeFn(val){
            this.dialogVisible = val
        },
    }
}
</script>

<style lang="stylus" scoped>
.setApproval
    .setApproval_content
        padding 40px
        margin-top 10px
        background-color #FFFFFF
        display flex
        flex-direction column
        .tips
            margin 0 0 28px
            width 100%
            height 109px
            background-color #FFF1F0
            border 1px solid #FFA39E
            border-radius 4px
            display flex
            align-items center
            i   
                margin 0 0 40px 28px
                font-size 20px
                color #ED3833
            .tips_text
                margin-left 17px
                display flex
                flex-direction column
                span 
                    margin 5px 0 
                    font-size 13px
                    color rgba(0, 0, 0, 0.65)
</style>

<style lang="stylus">
.setApproval
    width 100%
    .headerVueTitle
        button
            width auto !important 
            padding 10px 15px !important 
    .btnList
        padding 0 0 28px 0
        .el-button--small
            line-height 30px
            padding 0 8px
        .el-button+.el-button
            margin-left 20px !important
</style>
